<template>
    <view class="relative">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="推广产品" navbarType='3'></wlk-navbar>
        <wlk-canvas :mode="tabList[current].type" :item="shareLine" :qrcode="qrcode" ref="childComponent"></wlk-canvas>
        <u-sticky bgColor="#fff">
          <view class="content-tabs">
            <u-tabs
                :activeStyle="{
                          color: themeColor,
                          fontSize: '28rpx',
                          fontWeight: 'bold',
                          transform: 'scale(1.05)'
                      }"
                :itemStyle="{
                           height: '40px',
                           alignItems:'flex-start',
                           padding:'0 30rpx',
                      }"
                :inactiveStyle="{
                          color: '#646566',
                          fontSize: '28rpx',
                          transform: 'scale(1)'
                      }"
                :list="tabList"
                lineWidth="35"
                lineHeight="2"
                :current="current"
                :lineColor="themeColor"
                :scrollable="false"
                @change="tabclick"
            ></u-tabs>
          </view>
        </u-sticky>
        <view class="line-content pd030">
            <block v-if="loadStatus=='nomore' && list.length==0">
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.search"
                            text="没有搜索结果"
                    >
                    </u-empty>
                </view>
            </block>
            <block v-else>
                <navigator v-if="current==0" class="line-info mt30 wlkflex justify-between wd100 align-start relative" :url="'/pages/line/detail?id=' + line.lineInfo.id" v-for="(line,index) in list">
                    <view class="o-info-img br04 overHidden">
                        <image class="wd100 hg100" lazy-load :src="line.lineInfo.images[0]"  mode="aspectFill"/>
                    </view>
                  <view class="o-info-main wlkflex wrap align-content-between">
                    <view>
                      <view class="o-main-title u-line-2">
                        {{line.lineInfo.title}}
                      </view>
                      <view class="o-main-desc u-line-1 mt10">
                        {{line.lineInfo.desc}}
                      </view>
                    </view>


                        <view class="wlkflex justify-between wd100">
                            <view class="u-line-1">
                                预估佣金： <text class="o-main-price">¥<text class="ml05">{{ line.expect_price }}</text></text>
                            </view>
                            <view class="share-box" @tap.stop="setShare(line.lineInfo)">
                                <u-button :customStyle="{
			                    margin:'0',
			                    fontSize:'14rpx',
                                boxShadow:boxShadow,
                                height:'70rpx'
                         }" :color="linearColor"  shape="circle"  text="推广"></u-button>
                            </view>
                        </view>
                    </view>
                    <view class="line-start">
                        {{line.lineInfo.startcity[line.lineInfo.startcity.length-1].name}}出发
                    </view>
                </navigator>
              <navigator v-if="current==1" class="line-info mt30 wlkflex justify-between wd100 align-start relative" :url="'/pages/ticket/detail?id=' + ticket.ticketInfo.id" v-for="(ticket,index) in list">
                <view class="o-info-img br04 overHidden">
                  <image class="wd100 hg100" lazy-load :src="ticket.ticketInfo.images[0]"  mode="aspectFill"/>
                </view>
                <view class="o-info-main wlkflex wrap align-content-between">
                  <view>
                    <view class="o-main-title u-line-2">
                      {{ticket.ticketInfo.title}}
                    </view>
                    <view class="o-main-desc u-line-1 mt10">
                      {{ticket.ticketInfo.desc}}
                    </view>
                  </view>


                  <view class="wlkflex justify-end wd100">
                    <view class="share-box" @tap.stop="setShare(ticket.ticketInfo)">
                      <u-button :customStyle="{
			                    margin:'0',
			                    fontSize:'14rpx',
                                boxShadow:boxShadow,
                                height:'70rpx'
                         }" :color="linearColor"  shape="circle"  text="推广"></u-button>
                    </view>
                  </view>
                </view>
                <view class="ticket-tag wlkflex justify-between">
                  <uni-icons type="location" size="15" color="#FFFFFF"></uni-icons>
                  <view class="ml05">{{ ticket.ticketInfo.endcity[ticket.ticketInfo.endcity.length-1].name }}</view>
                </view>
              </navigator>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </block>

        </view>

        <u-popup safeAreaInsetBottom :customStyle="shareStyle" :show="showShare" @close="closeShare" round="20">
            <view class="share-box">
                <view class="pd30">
                    <view class="center title">立即推广</view>
                    <view class="share-btn-info wlkflex">
                        <!-- #ifdef H5 || MP-WEIXIN -->
                        <block  v-if="platform=='wxMiniProgram'">
                            <button open-type="share" @share='onShareAppMessage' class="wlkflex justify-center wrap" >
                                <view class="icon-box wlkflex justify-center" style="background-color: #07c160">
                                    <u-icon  name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
                                </view>
                                <view class="btn-name wd100 center mt10">微信好友</view>
                            </button>
                        </block>
                        <block v-else-if="platform=='wxOfficialAccount'">
                            <view class="wlkflex justify-center wrap" @click="showH5Share=true">
                                <view class="icon-box wlkflex justify-center" style="background-color: #07c160">
                                    <u-icon  name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
                                </view>
                                <view class="btn-name wd100 center mt10">微信好友</view>
                            </view>
                        </block>
                        <block v-else>
                            <view class="wlkflex justify-center wrap" @click="copyLink">
                                <view class="icon-box wlkflex justify-center">
                                    <i class="gg-link" style="color: #606266;transform: rotate(-45deg) scale(var(--ggs, 1.2));"></i>
                                </view>
                                <view class="btn-name wd100 center mt10">复制链接</view>
                            </view>
                        </block>
                        <!-- #endif -->
                        <view class="wlkflex justify-center wrap" @click="canvas">
                            <view class="icon-box wlkflex justify-center">
                                <u-icon name="photo-fill" size="32" :color="themeColor"></u-icon>
                            </view>
                            <view class="btn-name wd100 center mt10">分享海报</view>
                        </view>

                    </view>
                </view>
                <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                <view class="close center" @click="closeShare">取消</view>
            </view>
        </u-popup>
        <u-overlay :show="showH5Share" @click="showH5Share = false">
            <view class="wd100 hg100">
                <image src="/static/images/other/share.png" class="share-image" mode="widthFix"></image>
            </view>
        </u-overlay>
        <view class="bg-icon">
            <image class="wd100 br04":src="images.texture"  mode="widthFix"/>
        </view>
    </view>
</template>
<script>
    var _self;
    import {rgbaToRgb,toUrl,copy} from '@/wlkutils/tools';
    import platform from "@/wlkutils/platform";
    import share from "@/wlkutils/share";
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin','images','uEmpty'])

        },
        data() {
            return {
                boxShadow:'',
                linearColor:'',
                list:[],
                systemInfo : uni.getSystemInfoSync(),
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
                keyword:'',
                shareStyle:{},
                showShare:false,
                showH5Share:false,
                platform:platform.get(),
                shareLine:{},
                showCanvas:false,
                qrcode:'',
                tabList: [
                  {
                    type: 'line',
                    name: '线路',
                  },
                  {
                    type: 'ticket',
                    name: '景点',
                  },
                ],
              current:0
            };
        },
        onLoad() {
            _self = this;
            this.getData();
        },
        onShow() {
            this.linearColor = 'linear-gradient(to right,'+this.themeColor+' ,'+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.75)+')';
            this.boxShadow = '0px 5px 5px '+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), .2);
        },
        watch:{
            isLogin(val) {
                if(val){
                    _self.getData();
                }
            },
            themeColor(val) {
                this.linearColor = 'linear-gradient(to right,'+val+' ,'+ uni.$u.colorToRgba(rgbaToRgb(val), 0.75)+')';
                this.boxShadow = '0px 5px 5px '+ uni.$u.colorToRgba(rgbaToRgb(val), .2);
            }
        },
        onShareAppMessage(res){
            let data = new Object();
            data.title = this.shareLine.title;
            data.desc = this.shareLine.desc;
            data.params = {id:this.shareLine.id};
            data.path = 'pages/line/detail';
            data.imageUrl = this.shareLine.images[0].poster?this.shareLine.images[1].url:this.shareLine.images[0];
            return share.setShareInfo(data);
        },
      onReachBottom() {
        if(this.loadStatus == "nomore"){
          return;
        }
        this.page++;
        this.getData();
      },
        methods: {
            ...mapMutations(["setLoginPopupShow"]),
          tabclick(item) {
            this.current = item.index;
            this.re_Data();
          },
          re_Data(){
            this.page = 1;
            this.loadStatus = 'loading';
            this.list=[];
            this.getData();
          },
            scrolltolower() {
                if(this.loadStatus == "nomore"){
                    return;
                }
                this.page++;
                this.getData();
            },
            getData(){
                uni.$u.http.post('commission/getCommissionLine', {
                    page: this.page,
                    keyword:this.keyword,
                    type:this.tabList[this.current].type
                }).then(res => {
                    if (res && res.data && res.data.list) {
                        this.list = this.list.concat(res.data.list);
                    }
                    this.loadStatus = res.data.list.length < res.data.limit ? 'nomore' : 'loadmore';
                }).catch(res => {
                })

            },
            jump(path){
                toUrl(path);
            },
            setShare(v){
              this.shareLine = v;
              this.showShare = true;
            },
            init(){
                this.loadStatus = 'loading';
                this.page = 1;
                this.teams = [];
                this.getData();
            },

            initShareInfo(){
                let data = new Object();
                data.title = this.shareLine.title;
                data.desc = this.shareLine.desc;
                data.params = {id:this.shareLine.id};
                data.imageUrl = this.shareLine.images[0].poster?this.shareLine.images[1].url:this.shareLine.images[0];
                if(this.current==0){
                  data.path = 'pages/line/detail';
                }else if(this.current==1){
                  data.path = 'pages/ticket/detail';
                }
                return share.setShareInfo(data);
            },
            closeShare(){
                this.showShare = false;
            },
            copyLink(){
                let shareInfo = this.initShareInfo();
                copy(shareInfo.copyLink);
                _self.showShare = false;
            },
            async canvas(){
                if(!this.isLogin){
                    this.showShare = false;
                    this.setLoginPopupShow(true);
                    return false;
                }
                // 渲染
                // #ifndef MP
                let shareInfo = this.initShareInfo();
                this.qrcode = shareInfo.copyLink;
                this.$refs.childComponent.canvas();
                this.showShare = false;
                // #endif
                // #ifdef MP
                var json = {};
                json.id = this.shareLine.id;
                json.type = this.tabList[this.current].type;
                let res = await uni.$u.http.post('wechat/getUnlimitedQRCode',
                    json,{custom: {hideMsg: true}}
                ).then(res => {
                    _self.qrcode =  res.data;
                    _self.$refs.childComponent.canvas();
                    _self.showShare = false;
                })
                // #endif

            },
        }
    }
</script>
<style lang="scss">
   page{
       background-color: #FFFFFF;
     .content-tabs{
       border-bottom:1px solid #F9F9F9;
     }
       .line-content{
           .line-info{
               .o-info-img{
                   width: 220rpx;
                   height:  220rpx;
                   text-align: center
               }
               .o-info-main{
                   font-size: $font-base;
                   width: 66%;
                   padding: 10rpx 0;
                    height:  220rpx;
                   .o-main-title{
                       font-size: $font-lt;
                       font-weight: bold;
                   }
                   .o-main-desc{
                       font-size: $font-sm;
                       color: $uni-text-color-grey;
                   }
                   .tags{
                       margin-top: 8rpx;
                       .tags-item{
                           margin-right: 10rpx;
                       }
                   }
                   .o-main-price{
                       font-size: $font-base;
                       color: $-tour-price-color;
                   }
                   .share-box{
                       width: 32%;
                   }
               }
           }
           .line-start{
               position: absolute;
               left: 0;
               top: 0;
               font-size: $font-sm;
               background-color: rgba(0,0,0,0.18);
               border-radius:4px 0 4px 0;
               padding: 6rpx 10rpx;
               color: #FFFFFF;
           }
         .ticket-tag{
           position: absolute;
           left: 20rpx;
           top: 20rpx;
           font-size: $font-sm;
           background-color: rgba(0,0,0,0.4);
           border-radius:20rpx;
           padding: 0 15rpx;
           color: #FFFFFF;
           line-height: 40rpx;
         }

       }
       .bg-icon{
           position: absolute;
           top: -220rpx;
           right: -220rpx;
           z-index: -1;
           width: 100%;
           height: 700rpx;
           opacity: .1;
           overflow: hidden;
       }
       .share-box{
           .title{
               font-size: $font-base;
               color: $uni-text-color;
               padding: 10rpx;
           }
           .share-btn-info{
               margin: 50rpx 0 20rpx 0;
               button{
                   margin: 0;
               }
               .btn-name{
                   font-size: $font-sm;
                   color: $uni-text-color-grey;
               }
               .icon-box{
                   width: 95rpx;
                   height: 95rpx;
                   border-radius: 50%;
                   background-color: #F9F9F9;

               }
           }
           .close{
               line-height: 100rpx;
           }
       }
       .share-image{
           width:100%;
       }
   }
</style>
